<template>
  <div class="fit no-wrap column rounded-borders overflow-hidden">
    <TopTools v-model="mapMode" :openedMap="openedMap" @refreshMap="getMapJSON"></TopTools>
    <div class="making-map-page col row no-wrap">
      <template v-if="mapMode === 'preview'">
        <LeftMaps v-model="openedMap" :maps="maps" @updateMaps="getMaps"></LeftMaps>
      </template>
      <template v-else-if="mapMode === 'edit'">
        <LeftPoints :kinds="kinds" :types="types"></LeftPoints>
      </template>
      <!-- <Map v-model:loading="loading" v-model:refreshMap="refreshMap" :mapJSON="mapJSON" :mapMode="mapMode"
        :openedMap="openedMap"></Map> -->
      <ThreeJSMap v-model:loading="loading" v-model:refreshMap="refreshMap" :mapJSON="mapJSON" :openedMap="openedMap">
      </ThreeJSMap>
    </div>
  </div>
  <q-inner-loading :showing="loading">
    <q-spinner-ios color="primary" size="3rem" />
  </q-inner-loading>
</template>

<script setup>
import { postAPI } from 'src/api'
import { setPackagePoints } from 'src/views/MapCore/MapGlobal/utils/PackagePoints.js'
// import Map from 'src/views/MapCore/MapMaking/Index.vue'
import TopTools from 'src/views/MapCore/MapGlobal/Tools/TopTools.vue'
import { onMounted, provide, ref, watch } from 'vue'
import LeftMaps from 'src/views/MapCore/MapGlobal/Tools/LeftMaps.vue'
import LeftPoints from 'src/views/MapCore/MapGlobal/Tools/LeftPoints.vue'
import { unzip } from 'src/utils/PakoJson.js'
import ThreeJSMap from 'src/views/MapCore3D/Index3D.vue'

const maps = ref([])
const kinds = ref([])
const types = ref([])
const mapJSON = ref('')
const openedMap = ref({})
const loading = ref(false)
const refreshMap = ref(false)
const mapMode = ref('preview')
const updateOpenedMap = map => (openedMap.value = map)
watch(() => openedMap.value?.mapGroundCode, () => getMapJSON())
const getMaps = (mapGroundCode) => {
  loading.value = true
  postAPI('/yfagv/api/agvMap/findList', { pageSize: '-1' }, data => {
    maps.value = data.rows || []
    if (openedMap.value.mapGroundCode === mapGroundCode) {
      return getMapJSON()
    } else {
      loading.value = false
    }
  }, () => {
    loading.value = false
  })
}
const getMapsAndPoints = () => {
  loading.value = true
  postAPI('/yfagv/api/agvMap/findBasicDataAndMaps', { pageSize: '-1' }, data => {
    kinds.value = data.category || []
    types.value = data.categoryData || []
    setPackagePoints(data.pointCfg || [])
    maps.value = data.mapInfos || []
    if (!maps.value.length) return (loading.value = false)
    if (!openedMap.value.mapGroundCode) openedMap.value = maps.value?.[0] || {}
    else loading.value = false
  }, () => {
    maps.value = []
    kinds.value = []
    types.value = []
    setPackagePoints([])
    loading.value = false
  })
}
const getMapJSON = () => {
  if (!openedMap.value.mapGroundCode) {
    mapJSON.value = ''
    refreshMap.value = true
    return
  }
  loading.value = true
  const { mapGroundCode } = openedMap.value
  postAPI('/yfagv/api/mainBusinessMap/queryMapDetailGzip', { mapGroundCode }, data => {
    mapJSON.value = unzip(data?.baseMapDataGzip || '')
    refreshMap.value = true
    if (!mapJSON.value) loading.value = false
  }, () => (loading.value = false))
}
const setSingleMaps = (map = {}, action = 'update') => {
  if (maps.value.length === 0) openedMap.value = map
  const index = maps.value.findIndex(item => item.id === map.id)
  if (action === 'update') {
    if (map.id === openedMap.value.id) updateOpenedMap(map)
    if (index === -1) maps.value.push(map)
    else maps.value.splice(index, 1, map)
    return
  }
  if (action === 'delete' && index > -1) {
    maps.value.splice(index, 1)
    openedMap.value = maps.value?.[0] || {}
  }
}
onMounted(getMapsAndPoints)

provide('setSingleMaps', setSingleMaps)
</script>